<template>
  <div class="container">
    <!-- 左边宣传图展示 -->
    <div class="left">
      <el-carousel :interval="5000" arrow="always" class="carousel" height="100%">
        <el-carousel-item v-for="item in secondScreenImageList" :key="item.id">
          <img :src="item.imgUrl" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="right">
      <el-card class="box-card">
        <div slot="header" class="clearfix"><span>购物车详情</span></div>
        <cart-left-data-table></cart-left-data-table>
        <el-row :gutter="20">
          <el-col :span="8">
            <span>应付金额：{{ amountOfCartList.toFixed(2) }} 元</span>
          </el-col>
          <el-col :span="8">
            <span>优惠金额：{{ (amountOfCartList - cartPayAmount).toFixed(2) }} 元</span>
          </el-col>
          <el-col :span="8">
            <span>实付金额：{{ cartPayAmount.toFixed(2) }} 元 </span>
          </el-col>
        </el-row>
      </el-card>
    </div>

  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import CartLeftDataTable from '../components/settle/components/CartLeftDataTable.vue'

export default {
  name: 'SecondaryScreen',
  components: {
    CartLeftDataTable
  },
  computed: {
    ...mapGetters([
      'cartList',
      'amountOfCartList',
      'cartPayAmount',
      'secondScreenImageList'
    ])
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  /* background-image: url("https://bing.ioliu.cn/v1/rand?w=1920&h=1080"); */
  background-repeat: no-repeat;
  background-size: cover;
}

.left {
  width: 60%;
  height: 100%;

  float: left;

}

.right {
  float: left;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.desc {
  width: 1000px;
  height: 50px;
  background: white;
  margin-bottom: 10px;
  font-size: 2rem;
  line-height: 50px;
  pointer-events: none;
}

.box-card {
  width: 600px;
  pointer-events: none;
}

span {
  line-height: 30px;
}

.advertise {
  padding-top: 100px;
  margin-bottom: 100px;
  text-align: center;
}

.advertise img {
  height: 200px;
}

.carousel {
  width: 100%;
  height: 100%;
}

.carousel img {
  height: 100%;
  width: 100%;
}

</style>